<!-- 部门管理页面 -->
<template>
   <div class="content">
      <div class="w-8">
         <el-table :data="table" stripe style="width: 100%">
            <el-table-column prop="name" label="部门" width="180" />
            <!-- <el-table-column prop="name" label="Name" width="180" /> -->
            <el-table-column prop="value" label="人数" />
         </el-table>
         <div id="pie" style="width: 300px;height:400px"></div>
      </div>
      <div class="flex-1 ml-2">
         <div id="line" style="width: 50vw; height: 200px;" class="border "></div>
         <el-button type="primary" @click="openAddDialog" class="mt-1">新增部门</el-button>
         <el-table :data="tableData" stripe style="width: 100% ; height: 70%;" class="">
            <el-table-column prop="id" label="部门编号" width="180" />
            <el-table-column prop="name" label="部门名称" width="180" />
            <el-table-column prop="managerUserName" label="负责人" width="150" />
            <el-table-column prop="status" label="状态" width="150" >
               <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="success">启用</el-tag>
            <el-tag v-else-if="scope.row.status == 1" type="warning">弃用</el-tag>
            <el-tag v-else type="danger">删除</el-tag>
          </template>
            </el-table-column>  
            <el-table-column label="操作" min-width="150">
               <template #default="{ row }">
                  <el-button link type="primary" size="small" @click="handleClick(row)">
                     修改
                  </el-button>
                  <el-button link type="primary" size="small"  @click="handleDelete(row)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </div>
   </div>
   <el-dialog title="修改部门信息" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="form" label-width="80px">
         <el-form-item label="部门编号">
            <el-input v-model="form.id" disabled></el-input>
         </el-form-item>
         <el-form-item label="部门名称">
            <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="负责人">
            <el-select v-model="form.managerUserId" placeholder="负责人">
               <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <!-- <el-input v-model="form.managerUserId"></el-input> -->
         </el-form-item>
         <el-form-item label="排序码">
            <el-input v-model.number="form.sortCode"></el-input>
         </el-form-item>
         <el-form-item label="是否启用">
            <el-switch v-model="form.status" inactive-value="1" active-value="0"></el-switch>
         </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
         </span>
      </template>
   </el-dialog>
   <!-- 新增部门对话框 -->
   <el-dialog title="新增部门" v-model="addDialogVisible" width="30%" >
      <el-form :model="addForm" label-width="80px">
         <el-form-item label="部门名称">
            <el-input v-model="addForm.name"></el-input>
         </el-form-item>
         <el-form-item label="负责人">
            <el-select v-model="addForm.managerUserId" placeholder="负责人">
               <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <!-- <el-input v-model="form.managerUserId"></el-input> -->
         </el-form-item>
         <el-form-item label="排序码">
            <el-input v-model.number="addForm.sortCode"></el-input>
         </el-form-item>
         <!-- <el-form-item label="上级部门">
            <el-select v-model="addForm.parentId" placeholder="所属上级部门(可选)">
               <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
         </el-form-item> -->
         <el-form-item label="是否启用">
            <el-switch v-model="addForm.status" active-value="0" inactive-value="1"></el-switch>
         </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button @click="addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addDepartment">确定</el-button>
         </span>
      </template>
   </el-dialog>
   <!-- 新增部门按钮 -->
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import {
   getAboutPersonnel,
   getAboutDepartment,
   getAboutClock,
   getHeader,
   deptDelete,
   deptCount,
   deptAdd,
   deptUpdate,
   deptList,
   getEmployeeList
} from '@/api';
let pie; // 第一个饼状图
let line; // 第二个折线图
const dialogVisible = ref(false);
const table = ref([]);
const options = ref([]);
const userOptions=ref([]);
const form = ref({
   id: '',
   managerUserId: '',
   name: '',
   parentName: null,
   sortCode: 1,
   status: 0,
});
const addDialogVisible = ref(false); // 新增部门对话框的显示状态
const addForm = ref({
   id: '',
   managerUserId: '',
   name: '',
   parentId: null,
   sortCode: 1,
   status: 0,
});

const init=()=>{
   getHeader().then(res => {
      console.log(res.data.data);
    userOptions.value = res.data.data.map((item) => {
       return {
         name:item.name,
         id: item.id,
       }
    })
   }
   )
   deptCount().then(res => {
      const { data } = res.data;
      console.log(data);
      options.value= data.map((item)=>{
         return {
            id: item.id,
            name: item.name
         }
      })
      table.value = data;
      initPie(data, document.getElementById('pie'));
      initLine(data, document.getElementById('line'));
   });
   // 挂载折线图
   // 初始化表格
   deptList().then(res => {
      const { data } = res.data;
      console.log(data);
      tableData.value = data;
   });
}
onMounted(() => {
   // 挂载第一个饼图
   init();
});

const tableData = ref([
   {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
   {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
   },
]);

const initPie = (data, dom) => {
   pie = echarts.init(dom);
   const pieOptions = setPieOptions("部门人数统计", data);
   pie.setOption(pieOptions);
};

const initLine = (data, dom) => {
   line = echarts.init(dom);
   const lineOptions = setLineOptions("部门人数统计", data);
   line.setOption(lineOptions);
};

const handleClick = (data) => {
   console.log(data);
   form.value = data;
   dialogVisible.value = true;
};

const addDepartment=()=>{
   //添加部门信息
   console.log(addForm.value);
   deptAdd(addForm.value).then(res => {
      if (res.data.code == 200) {
         ElMessage.success({
            message: '添加成功',
            type: 'success'
         });
         init();
      } else {
         ElMessage.error({
            message: '添加失败',
            type: 'error'
         });
      }
   });
   addDialogVisible.value = false;
}

const handleDelete=(row)=>{
   console.log(row);
   deptDelete(row.id).then(res => {
      if (res.data.code == 200) {
         ElMessage.success({
            message: '删除成功',
            type: 'success'
         });
         init();
      } else {
         ElMessage.error({
            message: '删除失败',
            type: 'error'
         });
      }
   })
}

const handleClose = (done) => {
   // 在关闭对话框之前重置表单
   form.value = {
      id: '',
      managerUserId: '',
      name: '',
      parentName: null,
      sortCode: 1,
      status: 0,
   };
};

const submitForm = () => {
   // 在这里可以添加提交表单的逻辑
   console.log('提交表单:', form.value);
   deptUpdate(form.value).then(res => {
      if (res.data.code == 200) {
         ElMessage.success({
            message: '修改成功',
            type: 'success'
         });
      } else {
         ElMessage.error({
            message: '修改失败',
            type: 'error'
         });
      }
   });
   dialogVisible.value = false;
};

const openAddDialog = () => {
   addDialogVisible.value = true;
};

// const handleAdd

const setLineOptions = (title: string, data) => {
   return {
      title: {
         text: '部门出勤率'
      },
      tooltip: {
         trigger: 'axis'
      },
      legend: {
         data: data.map(item => item.name)
      },
      grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
      },
      toolbox: {
         feature: {
            saveAsImage: {}
         }
      },
      xAxis: {
         type: 'category',
         boundaryGap: false,
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
         type: 'value'
      },
      series: data.map(item => {
         return {
            name: item.name,
            type: 'line',
            stack: 'Total',
            data: item.value
         }
      })
   };

}
const setPieOptions = (title: string, data) => {
   return {
      title: {
         // text: title,
         // subtext: 'Fake Data',设置副标题
         left: 'center'
      },
      tooltip: {
         trigger: 'item'
      },
      legend: {
         orient: 'horizontal',
         left: 'left',
      },
      series: [
         {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
               itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
            }
         }
      ]
   }
}

</script>

<style lang="less" scoped>
.content {
   display: flex;
   justify-content: space-between;
   padding: 50px;
}
</style>